<template>
	<view class="bgColor" v-if="detail">
		<watermark></watermark>
		<view style="margin: 0 30rpx;border-bottom: 1px solid #c3c3c3;">
			<image style="width: 20%;margin: 40rpx 40% 0 40%;" src="/static/img/manage.png" mode="widthFix"></image>
			<view style="height: 80rpx;line-height: 80rpx;font-size: 36rpx;text-align: center;">群管理员</view>
			<view style="margin: 30rpx 10rpx;">
				<view style="height: 60rpx;line-height: 60rpx;font-size: 28rpx;">群管理员可以拥有以下功能</view>
				<view style="margin-left:20rpx; height: 60rpx;line-height: 60rpx;font-size: 28rpx;">1 审核群成员邀请好友的进群申请</view>
				<view style="margin-left:20rpx; height: 60rpx;line-height: 60rpx;font-size: 28rpx;">2 移除群成员（群主/群管理员除外）</view>
				<view style="margin-left:20rpx; height: 60rpx;line-height: 60rpx;font-size: 28rpx;">3 修改群聊名称，简介，公告</view>
				<view style="margin-left:20rpx; height: 60rpx;line-height: 60rpx;font-size: 28rpx;">4 群禁言，群成员互相加好友等设置</view>
			</view>
		</view>
		<view class="wxgroup-list">
			<view class="wxgroup-list-item" v-for="(v, i) in detail.user" @click="gofriend(v)" :key="i">
				<image class="wxgroup-list-img" :src="v.portrait" mode="aspectFill"></image>
				<text class="wxgroup-list-text">{{ v.nickName }}</text>
			</view>
			<view class="wxgroup-list-item" v-if="detail.user_type == 'root'" @click="qunAdd">
				<view class="wxgroup-list-icon"><view class="wxfont jia"></view></view>
			</view>
			<view class="wxgroup-list-item" v-if="detail.user_type == 'root'" @click="qunless">
				<view class="wxgroup-list-icon"><view class="wxfont jian"></view></view>
			</view>
		</view>
	</view>
</template>
<script>
import detailVue from '../personInfo/detail.vue';
export default {
	data() {
		return {
			detail: {},
			groupId: ''
		};
	},
	onLoad(e) {
		this.groupId = e.groupId;
	},
	onShow() {
		this.getInfo(this.groupId);
	},
	methods: {
		qunAdd() {
			uni.navigateTo({
				url: this.$fc.get_package_name()+'groupInfo/qunManageAdd?groupId=' + this.groupId
			});
		},
		qunless() {
			uni.navigateTo({
				url: this.$fc.get_package_name()+'groupInfo/qunManageDel?groupId=' + this.groupId
			});
		},
		gofriend(e) {
			uni.navigateTo({
				url: this.$fc.get_package_name()+'personInfo/detail?param=' + e.userId+'&source=7'
			});
		},
		getInfo(e) {
			this.$http.request({
				url: '/group/group_manage_list/?id=' + e,
				success: res => {
					if (res.data.code == 200) {
						this.detail = res.data.data;
					}
				}
			});
		}
	}
};
</script>
<style>
	page{
		background: #ffffff;
	}
</style>
<style scoped>
/* #ifdef APP-PLUS */
.bgColor {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff;
	z-index: -1;
	overflow: auto;
}
/* #endif */
/* #ifdef H5 */
page {
	background: #ededed;
}
/* #endif */

.xw-tool-list {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	margin-bottom: 18rpx;
}

.xw-tool-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 26rpx 24rpx;
	border-bottom: 1px #eee solid;
}
.xw-tool-list-content:nth-last-child(1) .xw-tool-item {
	border: none;
}

.xw-tool-text {
	margin-right: auto;
}

.xw-tool-btn-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 34rpx 44rpx;
	border-bottom: 1px #eee solid;
	font-weight: bold;
	color: #5f698c;
}
.wxgroup-list {
	background-color: #fff;
	padding: 24rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 24rpx;
}
.wxgroup-list-item {
	width: 20%;
	overflow: hidden;
	box-sizing: border-box;
	margin-top: 12rpx;
	margin-bottom: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.wxgroup-list-icon .wxfont {
	color: #999;
	font-size: 46rpx;
}
.wxgroup-list-img {
	width: 105rpx;
	height: 105rpx;
	border-radius: 12rpx;
}
.wxgroup-list-icon {
	display: flex;
	flex-direction: column;
	width: 105rpx;
	height: 105rpx;
	border-radius: 12rpx;
	align-items: center;
	justify-content: center;
	border: 1px #ddd dashed;
}
.wxgroup-list-text {
	text-align: center;
	width: 105rpx;
	font-size: 24rpx;
	color: #999;
	margin-top: 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.xw-tool-else .text {
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 520rpx;
}
</style>
